<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title><ins>Teste canvas</ins></title>
  </head>
	<body>
    <h1>Teste com canvas</h1>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript">
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext('2d');
      //limpando qualquer conteudo do canvas
      context.clearRect(0,0,canvas.width, canvas.height);

      //criando um gradiente
      var linearGradient = context.createLinearGradient(0, 0, 0, canvas.height);
      linearGradient.addColorStop(0, "red");
      linearGradient.addColorStop(0.4, "yellow");
      linearGradient.addColorStop(1, "green");

      //setando cores no contexto
      context.strokeStyle = "rgb(200,200,200)";
      context.fillStyle = linearGradient;
      //criando um path com coordenadas absolutas
      context.beginPath();
      context.moveTo(70,30);
      context.lineTo(130,140);
      context.lineTo(10,140);
      //fechando o path
      context.closePath();
      //desenhando o path e o stroke shape - borda
      context.stroke();
      //desenhando a cor interna do path
      context.fill();

      //criando circulo
      context.beginPath();
      context.arc(canvas.width/2, canvas.height/2, 50, 0, 2*Math.PI);
      context.fill();
      // criando outro triangulo
      context.fillStyle = "rgb(200, 200, 200)";
      context.strokeStyle = "rgba(255,0,0,0.75)";
      context.beginPath();
      context.moveTo(230, 30);
      context.lineTo(290, 140);
      context.lineTo(170, 140);
      context.closePath();
      context.fill();
      context.stroke();

    </script>       
	</body>
</html>


